<template>
  <div class="bgc-back approval-detail-wrapper" style="position: relative">
    <a-space>
      <a-button @click="handlerBack"> <a-icon type="left" />返回 </a-button>
    </a-space>
    <div class="examine-success" v-if="($route.query.pageType && applyForSubjectStatus >= 5) || (pageState === true && payStatus === 2)">
      <div class="mb10 examine-success-tit">
        <a-tooltip placement="top">
          <template slot="title">
            <span>{{ approvalRecord && approvalRecord.orderTitle }}</span>
          </template>
          <div class="examine-success-tit-f">
            <img class="examine-img" :src="img" alt srcset />
            {{ approvalRecord && approvalRecord.orderTitle }}
          </div>
        </a-tooltip>
        <div
          class="examine-success-tit-tag ml8"
          :style="{
            background: getPayStatusApplyForSuccess(approvalRecord.payStatus).background,
            color: getPayStatusApplyForSuccess(approvalRecord.payStatus).color
          }"
        >
          {{ getPayStatusApplyForSuccess(approvalRecord.payStatus).val }}
        </div>
      </div>
      <div class="examine-success-row">
        <div class="approvalTopName">发放账户：</div>
        <div class="approvalTopNameShow overflowsn">{{ approvalRecord && approvalRecord.issueAccountName }}</div>
      </div>
      <div class="examine-success-row">
        <div class="approvalTopName">发放人：</div>
        <div class="approvalTopNameShow overflowsn">{{ issueUserName }}</div>
      </div>
      <div class="examine-success-row">
        <div class="approvalTopName">发放时间：</div>
        <div class="approvalTopNameShow overflowsn">{{ issueCreate }}</div>
      </div>
      <div class="examine-success-row">
        <div class="approvalTopName">批次号：</div>
        <a-tooltip>
          <template slot="title">
            {{ approvalRecord.thirdPartyInteriorBatchId }}
          </template>
          <div class="approvalTopNameShow overflowsn">{{ approvalRecord.thirdPartyInteriorBatchId }}</div>
        </a-tooltip>
      </div>
    </div>
    <a-row
      class="approval-block"
      :class="($route.query.pageType && applyForSubjectStatus >= 5) || (pageState === true && payStatus === 2) ? 'payStatus' : ''"
      style="padding-bottom: 32px"
      v-if="approvalRecord"
    >
      <div style="position: absolute; right: 24px; z-index: 999">
        <a-button
          style="margin-right: 12px"
          v-if="approvalRecord.subjectStatus === 4 && approvalRecord.payStatus === 5 && pageState"
          @click="chakanjieguo"
          >查看结果</a-button
        >
        <a-button
          v-if="
            approvalRecord.subjectStatus === 4 &&
              approvalRecord.payStatus === 5 &&
              pageState &&
              approvalRecord.type === 1 &&
              approvalRecord.secondType !== 2
          "
          style="margin-left: 12px"
          type="primary"
          @click="payContinue"
          >继续支付</a-button
        >
        <a-button
          type="primary"
          @click="goPaySalary"
          v-if="
            ((approvalRecord.subjectStatus === 4 && approvalRecord.payStatus === 1) ||
              (approvalRecord.subjectStatus === 5 && approvalRecord.payStatus === 3)) &&
              pageState
          "
          >{{ approvalRecord.subjectStatus === 4 ? "薪资发放" : "重新发放" }}</a-button
        >
      </div>

      <a-col :span="24" v-if="$route.query.pageType && applyForSubjectStatus >= 5">
        <div class="mb10">
          <titborder>基本信息</titborder>
        </div>
      </a-col>
      <a-col :span="24" v-else>
        <div class="mb10" v-if="payStatus !== 2" :style="pageState ? 'display:flex' : ''">
          <span class="approval-block-top-title">
            <img class="examine-img" :src="img" alt srcset />
            {{ approvalRecord && approvalRecord.orderTitle }}
          </span>
          <div
            v-if="pageState"
            class="examineTag"
            :style="{ background: getPayStatus(payStatus).background, color: getPayStatus(payStatus).color }"
          >
            {{ getPayStatus(payStatus).val }}
          </div>

          <a-tag
            v-else-if="$route.query.pageType && applyForSubjectStatus < 5"
            :color="getPayStatusApplyFor(applyForSubjectStatus, approvalRecord.payStatus).color"
            >{{ getPayStatusApplyFor(applyForSubjectStatus, approvalRecord.payStatus).val }}</a-tag
          >
          <div v-else-if="$route.query.pageType && applyForSubjectStatus > 4"></div>
          <a-tag v-else :color="getApprovalStatusColorBlue(approval && approval.status)">{{
            getApprovalStatus(approval && approval.status)
          }}</a-tag>
        </div>
        <div class="mb10" v-else>
          <titborder>基本信息</titborder>
        </div>
        <!-- <div class="mb10 approval-block-top-num">编号：{{ approval && approval.approNumber }}</div>
        <div class="mb10 approval-block-top-num">公司：{{ companyName }}</div>
        <div class="mb10 approval-block-top-num">类型：{{ approval && approval.approTypeCodeName }}</div>-->
      </a-col>
      <a-row>
        <a-col :span="6">
          <div class="approvalTopName">用工单位：</div>
          <div class="approvalTopNameShow">{{ approvalRecord && approvalRecord.companyName }}</div>
        </a-col>
        <a-col :span="6">
          <div class="approvalTopName">申请人：</div>
          <div class="approvalTopNameShow">{{ approvalRecord && approvalRecord.createUserName }}</div>
        </a-col>
        <a-col :span="6" v-if="pageState && payStatus === 4">
          <div class="approvalTopName">实际发放人数：</div>
          <div class="approvalTopNameShow">{{ approvalRecord && approvalRecord.successCount }}</div>
        </a-col>
        <a-col v-else :span="6">
          <div class="approvalTopName">发放人数：</div>
          <div class="approvalTopNameShow">{{ approvalRecord && approvalRecord.totalCount }}</div>
        </a-col>
        <a-col :span="6">
          <div class="approvalTopName">备注：</div>
          <div class="approvalTopNameShow">{{ approvalRecord && approvalRecord.remark }}</div>
        </a-col>
      </a-row>
      <a-row style="padding-top: 24px">
        <a-col :span="6">
          <div class="approvalTopName">发放方式：</div>
          <div class="approvalTopNameShow">{{ typeFun(approvalRecord && approvalRecord.type) }}</div>
        </a-col>
        <a-col :span="6">
          <div class="approvalTopName">申请时间：</div>
          <div class="approvalTopNameShow">{{ approvalRecord && moment(approvalRecord.gmtCreate).format("YYYY-MM-DD HH:mm:ss") }}</div>
        </a-col>
        <a-col :span="6">
          <div class="approvalTopName">
            {{
              (pageState && payStatus === 1) ||
              (pageState && payStatus === 5) ||
              (pageState && payStatus === 3) ||
              (pageState && payStatus === 4)
                ? "预计发放总金额："
                : "发放总金额："
            }}
          </div>
          <div class="approvalTopNameShow">￥{{ approvalRecord && approvalRecord.money }}</div>
        </a-col>
        <a-col :span="6">
          <div v-if="pageState && payStatus === 3">
            <div class="approvalTopName">失败原因：</div>
            <div class="approvalTopNameShow">{{ approvalRecord && approvalRecord.failCause ? approvalRecord.failCause : "--" }}</div>
          </div>
          <div v-if="pageState && payStatus === 4">
            <div class="approvalTopName">实际发放总金额：</div>
            <div class="approvalTopNameShow">
              ￥{{ approvalRecord && approvalRecord.successMoney ? approvalRecord.successMoney : "--" }}
            </div>
          </div>
          <div v-if="pageState && payStatus === 2 && approvalRecord.type === 3">
            <div class="approvalTopName">手续费：</div>
            <div class="approvalTopNameShow">{{ approvalRecord && approvalRecord.feeAll ? approvalRecord.feeAll : "--" }}</div>
          </div>
        </a-col>
      </a-row>
      <a-row style="padding-top: 24px">
        <a-col :span="6">
          <div
            v-if="
              (pageState && payStatus === 4 && approvalRecord.type === 3) || (pageState && payStatus === 6 && approvalRecord.type === 3)
            "
          >
            <div class="approvalTopName">手续费：</div>
            <div class="approvalTopNameShow">{{ approvalRecord && approvalRecord.feeAll ? approvalRecord.feeAll : "--" }}</div>
          </div>
        </a-col>
      </a-row>
    </a-row>

    <a-row class="approval-block" style="padding-bottom: 32px">
      <a-col :span="24" class="approval-block-title">审批流程</a-col>
      <a-col :span="24">
        <ApprovalProcess :approvalVal="approvalNodes" />
      </a-col>
    </a-row>

    <a-row class="approval-block">
      <a-col :span="24" class="approval-block-title">发薪详情</a-col>
      <a-col :span="24">
        <!-- pageState && this.payStatus === 4 -->

        <approvalDetail
          @pageRefresh="pageRefresh"
          :approvalRecord="approvalRecord"
          :pageState="pageState"
          :payStatus="payStatus"
        ></approvalDetail>
      </a-col>
    </a-row>

    <div v-if="approval && approval.needAppro && approvalRecord.userApproverId && approvalRecord.userApproverId !== 'read'">
      <div style="height: 64px"></div>
      <div class="approval-block approvalBor">
        <a-button style="margin-right: 10px" @click="openModal('reject')" v-if="approval && approval.status === 1">拒绝</a-button>
        <a-button class="detailBack" @click="openModal('agree')" v-if="approval && approval.status === 1">同意</a-button>
      </div>
    </div>
    <!-- 弹出框 handlerAgree handlerReject-->
    <a-modal :title="Title" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="visible = false">
      <a-textarea :placeholder="placeholder" v-model="remark" :rows="4" />
    </a-modal>
    <a-modal title="薪资发放" :visible="weiXinPay" @ok="handleWXOk" @cancel="weiXinPay = false">
      <div style="display: flex; justify-content: flex-end; align-items: center; margin-right: 55px">
        <div style="font-size: 14px; font-weight: 400; color: #767885">发放方式：</div>
        <a-select placeholder="请选择发放方式" style="width: 260px" @select="subMchidChange">
          <a-select-option
            v-for="(item, index) in weixinList"
            :value="index"
            :key="index"
            :disabled="!item.zfbAccountBookId && item.type === 4"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </div>
      <div v-if="Verification">
        <div style="display: flex; justify-content: flex-end; align-items: center; margin-right: 55px; padding: 24px 0">
          <div style="font-size: 14px; font-weight: 400; color: #767885">支付验证手机号：</div>
          <div style="width: 260px">{{ paySelectItem.phone }}</div>
        </div>
        <div style="display: flex; justify-content: flex-end; align-items: center; margin-right: 55px">
          <div style="font-size: 14px; font-weight: 400; color: #767885">验证码：</div>
          <a-input-search style="width: 260px" placeholder="请输入验证码" @search="sendCode" v-model="codeBySend">
            <a-button slot="enterButton" :disabled="!clickable">
              {{ contentSend }}
            </a-button>
          </a-input-search>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import moment from "moment";
import { mapState } from "vuex";
import {
  userApproDetails,
  approvalHandlerAgreeReq,
  approvalHandlerRejectReq,
  pageRefresh,
  getResults,
  returnAuthorizationUrl,
  getWeiXinList,
  weixinPaySalary,
  paySalary,
  sendCode,
  huaBeiPaySalary,
  bankPaySalary
} from "./api";
import ApprovalProcess from "./components/approvalProcess";
import {
  getApprovalStatus,
  getApprovalStatusColorBlue,
  typeFun,
  getPayStatus,
  getPayStatusApplyFor,
  getPayStatusApplyForSuccess
} from "./funcs";
import approvalDetail from "./components/approvalDetail";
import img from "@/assets/img/shebaopaidan2x.png";
import titborder from "../applyFor/component/titborder.vue";
export default {
  name: "",
  components: { ApprovalProcess, approvalDetail, titborder },
  props: {},
  data() {
    return {
      weixinList: [],
      paySelectItem: null,
      remark: "",
      placeholder: "",
      confirmLoading: false,
      visible: false,
      Title: "",
      subMchid: undefined,
      approvalNodes: [],
      approval: null,
      payStatus: null,
      Verification: false,
      img,
      codeBySend: undefined,
      issueUserName: null,
      clickable: true,
      buttonState: false,
      currentTime: 60,
      weiXinPay: false,
      contentSend: "发送验证码",
      issueCreate: null,
      pageState: false,
      applyForSubjectStatus: 0
    };
  },
  computed: {
    ...mapState(["hr", "company"]),
    companyName() {
      return this.hr.companyName;
    },
    approvalId() {
      return this.$route.params.approvalId;
    },
    userApprovalId() {
      return this.$route.params.userApprovalId;
    },
    dynamicValueMap() {
      return {
        applyUser: this.hr.companyEmployeeList,
        oldDepartment: this.hr.companyDepartmentBaseList,
        newDepartment: this.hr.companyDepartmentBaseList,
        oldPosition: this.hr.companyPositionBaseList,
        newPosition: this.hr.companyPositionBaseList
      };
    },
    dynamicValueMapKeys() {
      return Object.keys(this.dynamicValueMap);
    },
    relationDataLoaded() {
      return (
        this.company.companyEmployeeList.length > 0 &&
        this.company.companyPositionBaseList.length > 0 &&
        this.company.companyDepartmentBaseList.length > 0
      );
    }
  },
  // watch: {
  //   relationDataLoaded: {
  //     handler(newVal) {
  //       if (newVal) {
  //       }
  //     },
  //     immediate: true
  //   }
  // },
  created() {
    // console.log("this.approvalRecord", this.approvalRecord);
    this.pageState = !!this.$route.query.pageState;
    if (this.pageState) {
      this.approvalRecord = JSON.parse(this.$route.query.record);
      this.pageRefresh();
      this.getWeiXinList();
    } else {
      this.approvalRecord = JSON.parse(this.$route.query.record);
      this.loadData();
    }
  },
  mounted() {},
  methods: {
    sendCode(e) {
      console.log(e);
      if (this.clickable) {
        this.clickable = false;
        this.contentSend = this.currentTime + "s";
        var timer = setInterval(() => {
          this.currentTime--;
          this.contentSend = this.currentTime + "s";
          if (this.currentTime <= 0) {
            this.clickable = true;
            this.contentSend = "重新获取";
            this.currentTime = 60;
            clearInterval(timer);
          }
        }, 1000);
        sendCode(this.paySelectItem.phone).then(res => {
          this.$notification["success"]({
            message: "success",
            description: "发送成功"
          });
        });
      }
    },
    payContinue() {
      console.log(this.approvalRecord);
      if (this.approvalRecord.payUrl) {
        window.open(this.approvalRecord.payUrl, "_blank");
        console.log(this.approvalRecord.payUrl);
      }
    },
    chakanjieguo() {
      getResults(this.approvalRecord.id)
        .then(res => {
          this.pageRefresh();
          this.$notification["success"]({
            message: "success",
            description: "查询成功"
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    getWeiXinList() {
      getWeiXinList({
        type: this.approvalRecord.type === 1 ? undefined : this.approvalRecord.type,
        "typeList[0]": this.approvalRecord.type === 1 ? 1 : undefined,
        "typeList[1]": this.approvalRecord.type === 1 ? 4 : undefined
      }).then(res => {
        this.weixinList = res.data;
      });
    },
    pageRefresh() {
      pageRefresh(this.approvalRecord.id).then(res => {
        this.approvalRecord = res.data;
        const record = JSON.parse(JSON.stringify(this.approvalRecord));
        if (record.subjectStatus === 5 && record.payStatus !== 4) {
          this.payStatus = record.payStatus;
        } else if (record.subjectStatus === 4 && record.payStatus === 5) {
          this.payStatus = 1;
        } else if (record.subjectStatus === 4 && record.payStatus === 1) {
          this.payStatus = 5;
        } else if (record.subjectStatus === 5 && record.payStatus === 4) {
          if (record.isDispose === true) {
            this.payStatus = 6;
          } else {
            this.payStatus = 4;
          }
        }
        if (record.issueUserName) this.issueUserName = record.issueUserName;
        if (record.issueCreate) this.issueCreate = record.issueCreate ? moment(record.issueCreate).format("YYYY-MM-DD HH:mm") : "";
        userApproDetails(record.userApproId)
          .then(res => {
            this.approval = res.data;
            this.approvalNodes = res.data.userApproNodeList;
            this.approvalNodes[0].approUserList = [{ userName: this.approval.userName, avatar: this.approval.userAvatar }];
            // 用于审批流程展示
            this.approvalNodes[0].userFlowApproverList = [
              {
                approverUserAvatar: this.approval.userAvatar,
                approverUserName: this.approval.userName,
                gmtCreate: this.approval.gmtCreate,
                approverOpinion: "发起审批",
                status: 2
              }
            ];
          })
          .catch(err => {
            console.log(err);
          });
        // this.$notification["success"]({
        //   message: "success",
        //   description: "刷新成功"
        // });
      });
    },
    subMchidChange(e) {
      this.paySelectItem = this.weixinList[e];
      console.log(this.paySelectItem);
      if (this.paySelectItem.type === 4 || this.paySelectItem.type === 3) {
        this.Verification = true;
      } else {
        this.Verification = false;
      }
    },
    handleWXOk() {
      if (this.paySelectItem) {
        if (this.paySelectItem.type === 1) {
          // 支付宝
          paySalary({
            batchId: this.approvalRecord.id,
            payType: "PC",
            pid: this.paySelectItem.zfbPid,
            appAuthToken: this.paySelectItem.zfbToken
          }).then(res => {
            this.weiXinPay = false;
            if (res.data) {
              window.open(res.data.urlPc, "_blank");
            }
            var that = this;
            this.pageRefresh();
            setTimeout(() => {
              this.$confirm({
                title: "查询发放结果",
                content: "系统发放会略有延迟，支付成功后可刷新订单查看结果",
                okText: "查询发放结果",
                onOk() {
                  getResults(that.approvalRecord.id)
                    .then(res => {
                      this.pageRefresh();
                    })
                    .catch(err => {
                      console.log(err);
                    });
                },
                onCancel() {
                  console.log("Cancel");
                }
              });
            }, 1000);
          });
        } else if (this.paySelectItem.type === 2) {
          // 微信
          weixinPaySalary({
            batchId: this.approvalRecord.id,
            subMchid: this.paySelectItem.subMchid
          }).then(res => {
            this.weiXinPay = false;
            var that = this;

            this.pageRefresh();
            setTimeout(() => {
              this.$confirm({
                title: "查询发放结果",
                content: "系统发放会略有延迟，支付成功后可刷新订单查看结果",
                okText: "查询发放结果",
                onOk() {
                  getResults(that.approvalRecord.id)
                    .then(res => {
                      this.pageRefresh();
                    })
                    .catch(err => {
                      console.log(err);
                    });
                },
                onCancel() {
                  console.log("Cancel");
                }
              });
            }, 1000);
          });
        } else if (this.paySelectItem.type === 4) {
          if (this.codeBySend) {
            huaBeiPaySalary({
              batchId: this.approvalRecord.id,
              accountId: this.paySelectItem.id,
              code: this.codeBySend
            }).then(res => {
              this.weiXinPay = false;
              this.pageRefresh();
              var that = this;
              setTimeout(() => {
                this.$confirm({
                  title: "查询发放结果",
                  content: "系统发放会略有延迟，支付成功后可刷新订单查看结果",
                  okText: "查询发放结果",
                  onOk() {
                    getResults(that.approvalRecord.id)
                      .then(res => {
                        this.pageRefresh();
                      })
                      .catch(err => {
                        console.log(err);
                      });
                  },
                  onCancel() {
                    console.log("Cancel");
                  }
                });
              }, 1000);
            });
          } else {
            this.$message.warning("请输入验证码");
          }
        } else if (this.paySelectItem.type === 3) {
          if (this.codeBySend) {
            bankPaySalary({
              batchId: this.approvalRecord.id,
              accountId: this.paySelectItem.id,
              code: this.codeBySend
            }).then(res => {
              this.weiXinPay = false;
              this.pageRefresh();
              var that = this;
              setTimeout(() => {
                this.$confirm({
                  title: "查询发放结果",
                  content: "系统发放会略有延迟，预估5-10分钟后，可点击查看结果获取发薪详情",
                  okText: "查询发放结果",
                  onOk() {
                    getResults(that.approvalRecord.id)
                      .then(res => {
                        this.pageRefresh();
                      })
                      .catch(err => {
                        console.log(err);
                      });
                  },
                  onCancel() {
                    console.log("Cancel");
                  }
                });
              }, 1000);
            });
          } else {
            this.$message.warning("请输入验证码");
          }
        }
      } else {
        this.$message.warning("请选择发放方式");
      }
    },
    goPaySalary() {
      // if (this.approvalRecord.type === 2) {
      this.weiXinPay = true;
      // }
      // else if (this.approvalRecord.type === 1) {
      //   var that = this;
      //   returnAuthorizationUrl().then(res => {
      //     if (res.data) {
      //       window.open(res.data, "_blank");
      //     }
      //     this.pageRefresh();
      //     setTimeout(() => {
      //       this.$confirm({
      //         title: "查询发放结果",
      //         content: "系统发放会略有延迟，支付成功后可刷新订单查看结果",
      //         okText: "查询发放结果",
      //         onOk() {
      //           getResults(that.approvalRecord.id)
      //             .then(res => {
      //               this.pageRefresh();
      //             })
      //             .catch(err => {
      //               console.log(err);
      //             });
      //         },
      //         onCancel() {
      //           console.log("Cancel");
      //         }
      //       });
      //     }, 1000);
      //   });
      //   localStorage.setItem("batchId", this.approvalRecord.id);
      // }
    },
    moment,
    loadData() {
      const record = JSON.parse(this.$route.query.record);

      if (this.$route.query.pageType) {
        this.applyForSubjectStatus = record.subjectStatus;
      } else {
        if (record.subjectStatus === 5 && record.payStatus !== 4) {
          this.payStatus = record.payStatus;
        } else if (record.subjectStatus === 4 && record.payStatus === 5) {
          this.payStatus = 1;
        } else if (record.subjectStatus === 4 && record.payStatus === 1) {
          this.payStatus = 5;
        } else if (record.subjectStatus === 5 && record.payStatus === 4) {
          if (record.isDispose === true) {
            this.payStatus = 6;
          } else {
            this.payStatus = 4;
          }
        }
      }

      if (record.issueUserName) this.issueUserName = record.issueUserName;
      if (record.issueCreate) this.issueCreate = record.issueCreate ? moment(record.issueCreate).format("YYYY-MM-DD HH:mm") : "";
      userApproDetails(record.userApproId)
        .then(res => {
          this.approval = res.data;
          this.approvalNodes = res.data.userApproNodeList;
          this.approvalNodes[0].approUserList = [{ userName: this.approval.userName, avatar: this.approval.userAvatar }];
          // 用于审批流程展示
          this.approvalNodes[0].userFlowApproverList = [
            {
              approverUserAvatar: this.approval.userAvatar,
              approverUserName: this.approval.userName,
              gmtCreate: this.approval.gmtCreate,
              approverOpinion: "发起审批",
              status: 2
            }
          ];
        })
        .catch(err => {
          console.log(err);
        });
    },
    openModal(e) {
      this.openState = e;
      this.visible = true;
      this.remark = "";
      if (e === "agree") {
        this.Title = "审批同意";
        this.placeholder = "请输入同意理由";
      } else {
        this.Title = "驳回意见";
        this.placeholder = "请输入驳回理由";
      }
    },
    handleOk() {
      if (this.openState === "agree") {
        this.handlerAgree();
      } else {
        this.handlerReject();
      }
    },
    handlerBack() {
      this.$router.go(-1);
    },
    buildUserApproInfoList(values) {
      const keys = Object.keys(values);
      const userApproInfoList = this.userApproInfoList.filter(item => item.settingType === "edit");
      keys.map(key => {
        const idx = userApproInfoList.findIndex(item => {
          return item.formId === key;
        });
        if (idx > -1) {
          userApproInfoList[idx]["value"] = values[key];
        }
      });
      return {
        userApproInfoList
      };
    },
    handlerAgree() {
      approvalHandlerAgreeReq(this.approval.userFlowApproverId, { remark: this.remark, userApproInfoList: [] }).then(res => {
        // TODO 审批完成的提示，刷新数据
        this.$message.success(res.msg);
        this.visible = false;
        this.loadData();
      });
    },
    handlerReject() {
      approvalHandlerRejectReq(this.approval.userFlowApproverId, { remark: this.remark, userApproInfoList: [] }).then(res => {
        // TODO 审批完成的提示，刷新数据
        this.$message.success(res.msg);
        this.visible = false;
        this.loadData();
      });
    },
    getApprovalStatusColorBlue,
    getApprovalStatus,
    typeFun,
    getPayStatus,
    getPayStatusApplyFor,
    getPayStatusApplyForSuccess,
    buildForm(list) {
      const formMap = {};
      const valueMap = {};
      const fieldKeys = [];
      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        const field = JSON.parse(item.props);
        if (item.settingType === "read") {
          field.customize.disabled = true;
        }
        valueMap[field.model] = this.formatFormValues(item.value, item.widgetType, item.formCode);
        formMap[field.model] = field;
        if (["read", "edit"].includes(item.settingType)) {
          fieldKeys.push(field.model);
        }
      }
      this.dataSource = valueMap;
      this.formFields = formMap;
      this.formConfig = {
        fieldKeys: fieldKeys,
        customize: {
          layout: "vertical",
          labelAlign: "left"
        }
      };
      this.$nextTick(() => {
        this.formVisible = true;
      });
    },
    formatFormValues(value, type, model) {
      if (type === "switch") {
        return value === "true";
      } else if (type === "number") {
        return value ? Number(value) : value;
      } else {
        if (this.dynamicValueMapKeys.includes(model)) {
          const dataMap = this.dynamicValueMap[model];
          const theItem = dataMap.filter(item => item.id === value);
          if (theItem.length > 0) {
            return theItem[0].name;
          } else {
            return value;
          }
        }
        return value;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
// ::v-deep.ant-input-search-enter-button + .ant-input-group-addon .ant-input-search-button,
// .ant-input-search-enter-button input + .ant-input-group-addon .ant-input-search-button {
//   // border-left: none;
//   color: var(--primary);
// }
.detailBack {
  background: var(--primary);
  color: #fff;
}
.approvalBor {
  text-align: right;
  box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  // width: 100%;
}
.approvalTopName {
  font-size: 14px;
  color: #a6a8b4;
  margin-bottom: 8px;
}
.approvalTopNameShow {
  font-size: 14px;
  color: #55565d;
}
.examineTag {
  min-width: 46px;
  height: 18px;
  border-radius: 2px;
  font-size: 10px;
  text-align: center;
  margin-top: 4px;
}
.examine-success {
  position: absolute;
  top: 42px;
  left: 0;
  width: 360px;
  height: 196px;
  background: #ffffff;
  border-radius: 4px;
  padding: 24px;
  .examine-success-tit {
    display: flex;
    .examine-success-tit-f {
      max-width: calc(100% - 72px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 18px;
      color: #3c3d43;
      font-weight: bold;
    }
    .examine-success-tit-tag {
      min-width: 46px;
      padding: 0 8px;
      height: 18px;
      border-radius: 2px;
      font-size: 10px;
      text-align: center;
      margin-top: 4px;
    }
  }
}
.examine-img {
  width: 18px;
  height: 18px;
  // vertical-align: middle;
  margin-right: 8px;
}
.examine-success-row {
  display: flex;
  .overflowsn {
    width: calc(100% - 80px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.payStatus {
  width: calc(100% - 372px);
  height: 194px;
  margin-left: 372px;
}
</style>
